<template>
  <div align="middle">
    <hr-chart :options="options" :width="400" :height="280"></hr-chart>
  </div>
</template>

<script>
import HrChart from "@/business/components/common/chart/HrChart";
import {dashboardDistributionUrl} from "@/api/cloud/dashboard/dashboard";

/* eslint-disable */
export default {
  name: "K8sScanChart",
  components: {
    HrChart,
  },
  props: {
    data: {},
  },
  data() {
    return {
      options: {},
    }
  },
  methods: {
    init() {
      this.$post(dashboardDistributionUrl, {group: "k8sRuleList", limit: 10}, response => {
        let legendData = [];
        let seriesData = [];
        for (let obj of response.data) {
          legendData.push(obj.groupName + ' ' + obj.yAxis + '/' + obj.yAxis2+ '(' + obj.xAxis + '分)');
          seriesData.push({
            name: obj.groupName + ' ' + obj.yAxis + '/' + obj.yAxis2+ '(' + obj.xAxis + '分)',
            value: obj.yAxis
          });
        }
        this.options = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center',
            data: legendData,
          },
          series: [
            {
              name: this.$t('resource.resource_result_score'),
              type: 'pie',
              radius: ['45%', '65%'],
              avoidLabelOverlap: false,
              top: 50,
              itemStyle: {
                borderRadius: 5,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: seriesData
            }
          ],
          color: ['#11cfae', '#009ef0', '#627dec', '#893fdc', '#89ffff','#0051a4', '#8B0000', '#FF4D4D', '#FF8000', '#336D9F']
        };
      });
    },
  },
  created() {
    this.init();
  },
}

</script>

<style scoped>

</style>
